<template>
  <div class="newLink" :class="{newForm: value !== ''}">
    <h3 v-if="value === ''">Connection type</h3>
    <el-select v-model="value" placeholder="select connection type">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <!--newTab-->
    <el-tabs v-model="activeName" v-if="value !== ''">
      <el-tab-pane label="General" name="General">
        <el-form>
          <el-form-item label="Connection type"><el-input /></el-form-item>
          <el-form-item label="Connection mode"><el-input /></el-form-item>
          <el-row :gutter="10">
            <el-col :span="18">
              <el-form-item label="Server"><el-input /></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="Port"><el-input /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="User"><el-input /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Password"><el-input /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Password mode"><el-select v-model="value" style="width: 100%;"/></el-form-item>
            </el-col>
          </el-row>

          <el-form-item label=""><el-checkbox>Is read only</el-checkbox></el-form-item>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="Default database"><el-select v-model="value" style="width: 100%;"/></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="SSH Tunnel" name="Tunnel">
        <el-form>
          <el-form-item label=""><el-checkbox>Use SSH tunnel</el-checkbox></el-form-item>
          <el-row :gutter="10">
            <el-col :span="18">
              <el-form-item label="Host"><el-input /></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="Port"><el-input /></el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="Bastion host(Jump host)"><el-input /></el-form-item>
          <el-form-item label="SSH Authentication"><el-input /></el-form-item>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="Login"><el-input /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Password"><el-input /></el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="Password mode"><el-select/></el-form-item> -->
          <!-- <el-form-item label=""><el-checkbox>Is read only</el-checkbox></el-form-item> -->
          <!-- <el-form-item label="Default database"><el-select/></el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="SSL" name="SSL">
        <el-form>
          <el-form-item label=""><el-checkbox>Use SSL</el-checkbox></el-form-item>
          <el-form-item label="CA Cert(optional)"><el-input /></el-form-item>
          <el-form-item label="Certificate(optional)"><el-input /></el-form-item>
          <el-form-item label="Certificate key file password(optional)"><el-input /></el-form-item>
          <el-form-item label="Key file(optional)"><el-input /></el-form-item>
          <el-form-item label=""><el-checkbox>Reject unauthorized</el-checkbox></el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="flex align-center" v-if="value !== ''">
      <el-button>Test</el-button>
      <el-button type="primary" @click="value = ''">Connect</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NewLink',
  data() {
    return {
      value: '',
      options: [{
        value: 'mysql',
        label: 'MySQL'
      }, {
        value: 'oracle',
        label: 'Oracle',
      }, {
        value: 'dm',
        label: '达梦',
      }, {
        value: 'rdjc',
        label: '人大金仓',
      }],
      activeName: "General",
    }
  }
}
</script>
<style lang="scss" scoped>
.newLink{
  padding: 50px;
  transition: all 0.2s;

  h3{
    margin-bottom:  20px;
  }
  ::v-deep .el-select{
    width: 50%;
  }
  &.newForm {
    padding: 15px;
    ::v-deep .el-select{
      margin-bottom: 20px;
    }
  }
}
::v-deep .el-form-item{
  margin-bottom: 5px;
}
</style>
